<template>
  <div class="index">
    <van-nav-bar title="面试技巧" left-arrow @click-left="onClickLeft" />
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
      shape="round"
      @focus="openSearch"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        @click="openDetail(item.id)"
        v-for="(item, index) in intSkillList"
        :key="index"
      >
        <technicItem :item="item" />
      </div>
    </van-list>
  </div>
</template>

<script>
import { articlesTechnic } from '@/api/api.js'
import technicItem from '@/views/technicList/technicItem.vue'
export default {
  components: {
    technicItem
  },
  data () {
    return {
      value: '',
      loading: false,
      finished: false,
      intSkillList: [],
      startnum: 0,
      tag: 'skill',
      aaa: process.env.VUE_APP_URL
    }
  },
  methods: {
    async onLoad () {
      const res = await articlesTechnic({
        limit: 6,
        start: this.startnum
      })
      this.startnum += 6
      console.log(res)
      res.data.list = res.data.list.map(v => {
        v.cover = this.aaa + v.cover
        return v
      })
      console.log(res.data.list)
      this.intSkillList = [...this.intSkillList, ...res.data.list]
      this.loading = false
      if (res.data.list.length === 0) {
        this.finished = true
      }
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    openSearch () {
      this.$router.push(`/search/${this.tag}`)
    },
    openDetail (id) {
      console.log(1)
      this.$router.push(`/technicDetail/${id}`)
    }
  },
  created () {}
}
</script>

<style lang="less" scoped>
.index {
  /deep/ .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
}
</style>
